<template>
  <div class="py-16 md:py-24 bg-gradient-to-b from-white to-neutral/20">
    <div class="container mx-auto px-4">
      <!-- 页面标题区 -->
      <div class="mb-12 scroll-animate">
        <div
          class="inline-block px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4"
        >
          精选推荐
        </div>
        <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary mb-3 leading-tight">
          高端艺术品精选拍品
        </h2>
        <p class="text-gray-600 max-w-2xl text-lg">
          由专家团队精心挑选的优质拍品，涵盖书画、玉器、瓷器等多个品类，品质保障，值得收藏
        </p>
      </div>

      <!-- 筛选与排序区 -->
      <div
        class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6 scroll-animate"
        style="animation-delay: 0.1s"
      >
        <!-- 左侧筛选 - 使用Element Plus的ElSelect -->
        <div class="flex flex-wrap gap-3">
          <el-select
            v-model="selectedCategory"
            placeholder="全部品类"
            class="w-[160px] custom-select"
            size="default"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select
            v-model="selectedPriceRange"
            placeholder="价格区间"
            class="w-[160px] custom-select"
            size="default"
          >
            <el-option
              v-for="item in priceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select
            v-model="selectedEra"
            placeholder="年代风格"
            class="w-[160px] custom-select"
            size="default"
          >
            <el-option
              v-for="item in eraOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- 右侧排序 -->
        <div class="flex items-center gap-4 w-full md:w-auto">
          <span class="text-gray-500">排序方式：</span>
          <button
            class="sort-btn flex items-center gap-1 text-primary font-medium"
            :class="{ active: sortType === 'recommend' }"
            @click="sortType = 'recommend'"
          >
            <i class="fa fa-star"></i>
            <span>推荐</span>
          </button>
          <button
            class="sort-btn flex items-center gap-1 text-gray-600"
            :class="{ active: sortType === 'price-asc' }"
            @click="sortType = 'price-asc'"
          >
            <i class="fa fa-sort-amount-asc"></i>
            <span>价格从低到高</span>
          </button>
          <button
            class="sort-btn flex items-center gap-1 text-gray-600"
            :class="{ active: sortType === 'price-desc' }"
            @click="sortType = 'price-desc'"
          >
            <i class="fa fa-sort-amount-desc"></i>
            <span>价格从高到低</span>
          </button>
        </div>
      </div>

      <!-- 精选拍品网格 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
        <div
          v-for="(item, index) in sortedItems"
          :key="item.id"
          class="group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 scroll-animate"
          :style="{ animationDelay: `${(index % 8) * 0.1}s` }"
        >
          <!-- 拍品图片 -->
          <div class="relative overflow-hidden aspect-[3/4]">
            <img
              :src="item.image"
              :alt="item.name"
              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
            />
            <!-- 标签 -->
            <div class="absolute top-3 left-3">
              <span
                class="inline-block bg-primary text-white text-xs font-bold px-2 py-1 rounded-md"
              >
                {{ item.category }}
              </span>
            </div>
            <!-- 收藏按钮 -->
            <button
              class="absolute top-3 right-3 w-8 h-8 bg-white/80 backdrop-blur-sm rounded-full flex items-center justify-center text-gray-600 hover:text-red-500 transition-colors"
              @click.stop="toggleFavorite(item.id)"
            >
              <i :class="item.isFavorite ? 'fa fa-heart text-red-500' : 'fa fa-heart-o'"></i>
            </button>
            <!-- 快速查看按钮 -->
            <div
              class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300"
            >
              <button
                class="w-full bg-white text-primary font-medium py-2 rounded-md hover:bg-primary hover:text-white transition-colors"
              >
                快速查看
              </button>
            </div>
          </div>

          <!-- 拍品信息 -->
          <div class="p-5">
            <h3
              class="font-bold text-lg text-primary mb-2 group-hover:text-primary-dark transition-colors line-clamp-1"
            >
              {{ item.name }}
            </h3>
            <p class="text-gray-600 text-sm mb-4 line-clamp-2 h-12">
              {{ item.description }}
            </p>
            <div class="flex justify-between items-center">
              <div>
                <div class="text-xs text-gray-500 mb-1">起拍价</div>
                <div class="text-primary font-bold text-xl">
                  ¥{{ item.startingPrice.toLocaleString() }}
                </div>
              </div>
              <router-link
                :to="`/item/${item.id}`"
                class="text-primary hover:text-primary-dark font-medium flex items-center gap-1 transition-colors"
              >
                <span>详情</span>
                <i class="fa fa-arrow-right text-sm"></i>
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="text-center scroll-animate">
        <button
          class="bg-white border border-primary text-primary hover:bg-primary hover:text-white font-medium px-8 py-3 rounded-lg transition-all duration-300 flex items-center gap-2 mx-auto"
          @click="loadMore"
        >
          <span>加载更多拍品</span>
          <i class="fa fa-refresh" :class="{ 'fa-spin': isLoading }"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElSelect, ElOption } from 'element-plus'

// 定义选项类型
interface SelectOption {
  value: string
  label: string
}

// 定义拍品类型
interface ProductItem {
  id: number
  name: string
  image: string
  category: string
  description: string
  startingPrice: number
  isFavorite: boolean
}

// 筛选选项数据
const categoryOptions: SelectOption[] = [
  { value: 'painting', label: '书画作品' },
  { value: 'jade', label: '玉器翡翠' },
  { value: 'porcelain', label: '瓷器杂项' },
  { value: 'jewelry', label: '珠宝钟表' },
  { value: 'calligraphy', label: '书法作品' },
]

const priceOptions: SelectOption[] = [
  { value: '0-10', label: '10万以下' },
  { value: '10-50', label: '10-50万' },
  { value: '50-100', label: '50-100万' },
  { value: '100-500', label: '100-500万' },
  { value: '500+', label: '500万以上' },
]

const eraOptions: SelectOption[] = [
  { value: 'ancient', label: '古代' },
  { value: 'modern', label: '近现代' },
  { value: 'contemporary', label: '当代' },
]

// 选中的筛选值
const selectedCategory = ref('')
const selectedPriceRange = ref('')
const selectedEra = ref('')

// 排序类型
const sortType = ref<'recommend' | 'price-asc' | 'price-desc'>('recommend')

// 加载状态
const isLoading = ref(false)

// 精选拍品数据
const featuredItems = ref<ProductItem[]>([
  {
    id: 1,
    name: '清代 和田玉籽料雕如意摆件',
    image: 'https://picsum.photos/id/1082/600/800',
    category: '玉器翡翠',
    description: '清代和田玉籽料雕刻如意摆件，玉质温润，雕工精细，寓意吉祥如意，保存完好',
    startingPrice: 860000,
    isFavorite: false,
  },
  {
    id: 2,
    name: '张大千 山水图轴',
    image: 'https://picsum.photos/id/1062/600/800',
    category: '书画作品',
    description: '近现代著名画家张大千山水作品，纸本设色，构图精妙，笔墨浑厚，经权威鉴定',
    startingPrice: 3200000,
    isFavorite: true,
  },
  {
    id: 3,
    name: '北宋 汝窑天青釉盘',
    image: 'https://picsum.photos/id/1079/600/800',
    category: '瓷器杂项',
    description: '北宋汝窑天青釉盘，釉色温润如玉，开片自然，底有芝麻钉痕，极为珍贵',
    startingPrice: 5800000,
    isFavorite: false,
  },
  {
    id: 4,
    name: '齐白石 花鸟图册',
    image: 'https://picsum.photos/id/1063/600/800',
    category: '书画作品',
    description: '齐白石花鸟图册，共十二开，每开构图独特，笔墨简练，生动传神，原装旧裱',
    startingPrice: 1680000,
    isFavorite: false,
  },
  {
    id: 5,
    name: '清代 翡翠手镯',
    image: 'https://picsum.photos/id/1074/600/800',
    category: '珠宝钟表',
    description: '清代老坑翡翠手镯，满绿通透，质地细腻，水头充足，圈口适中，佩戴收藏皆宜',
    startingPrice: 2300000,
    isFavorite: true,
  },
  {
    id: 6,
    name: '王羲之 兰亭序摹本',
    image: 'https://picsum.photos/id/1068/600/800',
    category: '书法作品',
    description: '唐代冯承素摹王羲之兰亭序，纸本，墨色饱满，笔法精妙，是难得的书法珍品',
    startingPrice: 4500000,
    isFavorite: false,
  },
  {
    id: 7,
    name: '明代 宣德炉',
    image: 'https://picsum.photos/id/1080/600/800',
    category: '瓷器杂项',
    description: '明代宣德年制铜炉，器型端庄，包浆浑厚，底有"大明宣德年制"款识，传世珍品',
    startingPrice: 980000,
    isFavorite: false,
  },
  {
    id: 8,
    name: 'Rolex 古董腕表',
    image: 'https://picsum.photos/id/1071/600/800',
    category: '珠宝钟表',
    description: '1950年代Rolex古董腕表，玫瑰金材质，自动机械机芯，保存完好，功能正常',
    startingPrice: 380000,
    isFavorite: false,
  },
])

// 处理收藏功能
const toggleFavorite = (id: number) => {
  const item = featuredItems.value.find((item) => item.id === id)
  if (item) {
    item.isFavorite = !item.isFavorite
    ElMessage({
      message: item.isFavorite ? '已添加到收藏' : '已从收藏中移除',
      type: 'success',
      duration: 1500,
    })
  }
}

// 加载更多功能
const loadMore = () => {
  isLoading.value = true

  // 模拟接口请求延迟
  setTimeout(() => {
    // 复制现有数据并修改id和部分信息作为新数据
    const newItems = featuredItems.value.slice(0, 4).map((item) => ({
      ...item,
      id: item.id + featuredItems.value.length,
      isFavorite: false,
    }))

    featuredItems.value = [...featuredItems.value, ...newItems]
    isLoading.value = false

    ElMessage({
      message: '已加载更多拍品',
      type: 'success',
      duration: 1500,
    })
  }, 1500)
}

// 排序后的拍品列表
const sortedItems = computed<ProductItem[]>(() => {
  // 创建副本避免修改原数组
  const items = [...featuredItems.value]

  switch (sortType.value) {
    case 'price-asc':
      return items.sort((a, b) => a.startingPrice - b.startingPrice)
    case 'price-desc':
      return items.sort((a, b) => b.startingPrice - a.startingPrice)
    default:
      return items // 推荐排序（默认顺序）
  }
})

// 滚动动画初始化
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
})
</script>

<style scoped>
/* 滚动入场动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 自定义Element Select样式 */
:deep(.custom-select .el-select__wrapper) {
  border-radius: 8px;
  border-color: #e2e8f0;
  padding: 2px 12px;
  height: 40px;
}

:deep(.custom-select .el-select__placeholder) {
  color: #94a3b8;
}

:deep(.custom-select .el-select__input) {
  color: #1a365d;
}

:deep(.custom-select .el-select__arrow) {
  color: #1a365d;
  transition: transform 0.3s ease;
}

:deep(.custom-select .el-select__arrow.is-show-close) {
  transform: rotate(180deg);
}

:deep(.custom-select .el-select-dropdown__item) {
  color: #1a365d;
  padding: 8px 16px;
}

:deep(.custom-select .el-select-dropdown__item:hover) {
  background-color: rgba(26, 54, 93, 0.08);
}

:deep(.custom-select .el-select-dropdown__item.selected) {
  color: #1a365d;
  font-weight: 500;
  background-color: rgba(26, 54, 93, 0.05);
}

/* 排序按钮样式 */
.sort-btn {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.sort-btn:hover {
  background-color: rgba(26, 54, 93, 0.05);
}

.sort-btn.active {
  background-color: rgba(26, 54, 93, 0.1);
  color: #1a365d;
}

/* 自定义颜色变量 */
:root {
  --primary: #1a365d;
  --primary-dark: #0f243b;
  --primary-light: #2c4a70;
}

.text-primary {
  color: var(--primary);
}

.text-primary-dark {
  color: var(--primary-dark);
}

.bg-primary {
  background-color: var(--primary);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sort-btn span {
    display: none;
  }

  .sort-btn {
    padding: 6px;
  }

  :deep(.custom-select) {
    width: 120px !important;
  }
}
</style>
